<template>
  <article class="page">
    <headerbar>总结上报</headerbar>
    <div class="nav-wrap">
      <cube-scroll-nav-bar :current="current" :labels="labels" @change="changeHandler"/>
    </div>

    <section class="frame-content bg-light-gray">


      <!--培训方案-->
     <!-- <section class="block pdv-3 pdh-3">
        <div class="title">培训方案：</div>
        <div>
        </div>
      </section>-->

      <!--教学计划-->
      <section class="block " v-if="detail.curriculumList && '教学计划'==current">
        <div class="pdv-3 list-news-img list-wenda mgh-2">
          <div v-for="(item,index) in detail.curriculumList" :key="index" class="item">
            <div class="cont  pdh-0">
              <div class="title">{{index+1}}、课程名称：{{item.name}}</div>
              <div class="">
                <p class="tip">讲师：{{item.lecturerName}} <i class="pdh-2"></i>  班级名称：{{item.className}}</p>
                <p class="tip">模块：{{item.modular}}  <i class="pdh-2"></i> 学时：{{item.classHour}} </p>
                <p class="tip">培训时间：{{item.beginData}} - {{item.endData}}</p>
              </div>
            </div>

          </div>
        </div>
      </section>

      <!--出勤情况-->
      <!--<section class=" pdv-3 ">
        <section class="people-list ">

          <div class="people-item bg-white block" v-for="item in 5">
            <section class="people-info">
              <div class="avatar-img">
                <img src="../../../../static/images/default.jpg" alt="">
              </div>
              <span class="name">经开区</span>
            </section>
            <span class="">
              <span class="tip pdh-2">缺席：3天</span>
              <span class="tip pdh-2">出席：<span class="color-red">3天</span></span>
            </span>
          </div>
        </section>
      </section>-->


      <!--学员名单-->
      <section class=" pdv-3 " v-if="detail.userContactList && '学员名单'==current">
        <section class="people-list ">

          <div class="people-item bg-white block" v-for="item in detail.userContactList">
            <section class="people-info">
              <span class="name">{{item.userName}}</span>
              <span class="name">{{item.score}}</span>
            </section>
            <span class="">
            </span>
          </div>
        </section>
      </section>

      <!--学习心得-->
     <!-- <section class="block pdv-3 pdh-3">
        <div class="title">学习心得：</div>
        <div class="big-textarea">
          <textarea  cols="30" rows="10"></textarea>
        </div>
      </section>-->

      <!--基本信息-->
      <section class="block" v-if="detail && '基本信息'==current">
        <div class="pdv-3 list-news-img list-wenda mgh-2">
          <div class="cont  pdh-0">
            <p class="title">基本情况：{{detail.pxzjJbqk}}</p>
            <p class="title">主要做法：{{detail.pxzjZyzf}}</p>
            <p class="title">存在问题：{{detail.pxzjCzwt}}</p>
            <p class="title">经验成效：{{detail.pxzjJycx}}</p>
            <p class="title">工作建议：{{detail.pxzjGzjy}}</p>
          </div>
        </div>
      </section>


    </section>
  </article>
</template>

<script>
  export default {
    name: 'trainingplanClassDetail',
    data () {
      return {
        currentIndex: 0,
        pageIndex: 1,
        pageSize: 10,
        menuId: '',
        isLoading: true,
        detail: {},
        menuList: [],
        list: [],
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        id: '',
        current: '基本信息',
        labels: [
//          '培训方案',
          '基本信息',
          '教学计划',
          '学员名单'
//          '出勤情况',
//          '学习心得',
        ]
      }
    },
    created () {
      this.data = this.$store.state.trainingplanClassListItem
      this.id = this.$route.query.id
      this.loadData(this.id)
    },
    methods: {
      changeHandler (cur) {
        this.current = cur
      },
      loadData (id) {
        let params = {
          "id": id
        }
        this.fetchService.trainingplanClassSelectAll(params).then(res => {
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg)
          }
          this.isLoading = false
          this.detail = res.data
          return res
        })
      }
    }
  }
</script>
<style lang="scss" scoped="">
  .nav-wrap {
    padding:15px;
    background:#fff;
  }
  .list-news-img .item .cont .title {
    margin-bottom:15px;
    height:auto;
    min-height:1em;
    line-height: normal;
  }
  .list-news-img {
    .item {
      &:last-child {
        border:none
       }
    }
  }
</style>

